<template>
  <div class="search-demo">
    <h3 class="title">基本</h3>
    <div>
      <p>Enter触发</p>
      <p><d-search @search="search" v-model="searchText1"></d-search></p>
      <p>Keyup触发</p>
      <p><d-search @search="search" v-model="searchText2" position="front" trigger-type="input"></d-search></p>
    </div>
    <h3 class="title">拥有搜索按钮的查询组件</h3>
    <div>
      <p><d-search @search="search" v-model="searchText3" v-width="300" showSearchButton placeholder="查询示例1"></d-search></p>
      <p><d-search @search="search" v-model="searchText4" v-width="300" showSearchButton searchText="Search" placeholder="查询示例2"></d-search></p>
      <p>
        <d-search @search="search" v-model="searchText5" v-width="300" showSearchButton placeholder="查询示例3">
          <i class="d-icon-search"></i>
        </d-search>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'searchDemo',
  data () {
    return {
      searchText1: null,
      searchText2: null,
      searchText3: '',
      searchText4: '',
      searchText5: ''
    }
  },
  methods: {
    search (data) {
      this.$Message.info(`查询"${data}"`)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .search-demo
</style>
